<template>
  <view class="view-main">
    <map
      :latitude="latitude"
      :longitude="longitude"
      scale="16"
      show-location
      style="width: 100%; height: 30vh"
    >
      <image class="map-marker" :src="markerIcon"></image>
    </map>
    <view class="page-con">
      <view class="con-hd">
        <view
          class="choose-address"
          v-if="!addressInfo || !addressInfo.address"
          @click="chooseAddressView"
        >
          选择收货地址 >
        </view>
        <view class="choose-address2" v-else>
          <view class="address2-l">
            <view class="address2-lhd">{{ addressInfo.title }}</view>
            <view class="address2-lbd">{{ addressInfo.address }}</view>
          </view>
          <view class="address2-r" @click="chooseAddressView">修改地址</view>
        </view>
      </view>
      <view class="con-bd">
        <view class="con-bd-item">
          <view class="con-bd-item-name">详细地址</view>
          <view class="con-bd-item-con">
            <input
              type="text"
              v-model="formData.detailAddress"
              placeholder="详细地址，例如1层101室"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
        <!-- <view class="con-bd-item">
					<view class="con-bd-item-name">标签</view>
					<view class="con-bd-item-con">
						<view :class="formData.lableName == item ? 'lable-item lable-item-on':'lable-item'"
							v-for="(item,index) in labelData" :key="index" @click="chooseLable(item)">{{item}}</view>
					</view>
				</view> -->
        <view class="con-bd-item">
          <view class="con-bd-item-name">联系人</view>
          <view class="con-bd-item-con con-bd-item-con2">
            <input
              type="text"
              v-model="formData.userName"
              placeholder="请填写收货人姓名"
              placeholder-class="input-placeholder"
            />
            <!-- <view class="con-bd-sex-box" @click="chooseSex(1)">
							<image class="choose-sex-icon" :src="formData.sexType == 1 ? sele2Icon : noseleIcon"
								mode=""></image>
							先生
						</view>
						<view class="con-bd-sex-box" @click="chooseSex(2)">
							<image class="choose-sex-icon" :src="formData.sexType == 2 ? sele2Icon : noseleIcon"
								mode=""></image>
							女士
						</view> -->
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">手机号</view>
          <view class="con-bd-item-con">
            <input
              type="number"
              maxlength="11"
              v-model="formData.userPhone"
              placeholder="请填写收货人手机号码"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
        <view class="con-bd-agree" @click="changeAgree">
          <image
            class="agreeicon"
            :src="agreeState ? seleIcon : noseleIcon"
            mode=""
          ></image>
          <view class="agreetext">设为默认地址</view>
        </view>
        <view
          class="con-ft-btn"
          :class="{
            'con-ft-btn1': addressInfo && addressInfo.address,
            'con-ft-btn3': !addressInfo || !addressInfo.address,
          }"
          @click="submitAddress"
        >
          保存地址</view
        >
        <view class="con-ft-btn con-ft-btn2" @click="deleteAddress"
          >删除地址</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { baseImgUrl } from "@/config";
export default {
  data() {
    return {
      formData: {
        detailAddress: "",
        userName: "",
        userPhone: "",
        lableName: "家",
        sexType: 1, //1 先生 2 女士
      },
      labelData: ["家", "公司", "学校", "父母家"],
      addressInfo: {}, //选中的地址信息
      agreeState: false, //是否是默认地址
      longitude: null,
      latitude: null,
      markerIcon: require("../../static/marker.png"),
      seleIcon: require(baseImgUrl + "icon_checked.png"),
      sele2Icon: require("../../static/sele2.png"),
      noseleIcon: require("../../static/no-sele.png"),
      oldObj: "",
    };
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    //数据回显时使用此方法
    setData(obj) {
      this.oldObj = obj;
      this.formData.detailAddress = obj.detailAddress;
      this.formData.userName = obj.userName;
      this.formData.userPhone = obj.userPhone;
      this.formData.lableName = obj.lableName;
      this.formData.sexType = obj.sexType;
      this.addressInfo.title = obj.title;
      this.addressInfo.address = obj.address;
      this.addressInfo.latitude = obj.latitude;
      this.addressInfo.longitude = obj.longitude;
      this.agreeState = obj.agreeState;
    },
    //获取当前的地理位置
    getLocation() {
      console.log(0, "90");
      let that = this;
      return;
      uni.showLoading({
        title: "正在获取定位中...",
      });
      uni.getLocation({
        type: "gcj02",
        // isHighAccuracy: true,
        // geocode: 'true',
        // highAccuracyExpireTime: 3500,
        success: (res) => {
          console.log(res, "9090");
          // uni.hideLoading();
          // that.longitude = res.longitude;
          // that.latitude = res.latitude;
        },
        fail: (res) => {
          console.log(res, "0");
          if (res.errMsg == "getLocation:fail auth deny") {
            uni.showModal({
              content: "检测到您没打开获取信息功能权限，是否去设置打开？",
              confirmText: "确认",
              cancelText: "取消",
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting({
                    success: (res) => {},
                  });
                } else {
                  return false;
                }
              },
            });
          }
        },
      });
    },
    //保存地址
    submitAddress() {
      if (!this.addressInfo.latitude) {
        uni.showToast({
          title: "请选择收货地址",
          icon: "none",
        });
        return;
      }
      if (!this.formData.detailAddress) {
        uni.showToast({
          title: "请输入门牌号",
          icon: "none",
        });
        return;
      }
      if (!this.formData.userName) {
        uni.showToast({
          title: "请输入联系人",
          icon: "none",
        });
        return;
      }
      if (!this.formData.userPhone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      let obj = {
        ...this.formData,
        ...this.addressInfo,
      };
      obj.agreeState = this.agreeState;
      this.$emit("submit", obj);
    },
    //删除地址
    deleteAddress() {
      this.$emit("detele", this.oldObj);
    },
    //选择地址、修改编辑地址
    chooseAddressView() {
      uni.chooseLocation({
        success: (res) => {
          if (!res.name || !res.address || !res.latitude || !res.longitude)
            return;
          let addressObj = {
            title: res.name,
            address: res.address,
            latitude: res.latitude,
            longitude: res.longitude,
          };
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.addressInfo = addressObj;
        },
      });
    },
    //联系人性别选择
    chooseSex(type) {
      this.formData.sexType = type;
    },
    //标签选择
    chooseLable(item) {
      this.formData.lableName = item;
    },
    //点击隐私协议
    changeAgree() {
      this.agreeState = !this.agreeState;
    },
  },
};
</script>

<style scoped>
.view-main {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}

.map-marker {
  width: 44rpx;
  height: 62rpx;
  position: absolute;
  top: 15vh;
  left: 50%;
  transform: translate(-50%, -50%);
}

.map-tip {
  font-size: 20rpx;
  color: #b6b6b6;
  line-height: 42rpx;
  padding: 0 20rpx;
  position: absolute;
  left: 50%;
  top: 30rpx;
  box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
  background-color: #fff;
  border-radius: 4px;
  transform: translateX(-50%);
}

.poiss-box {
  width: 100%;
  padding: 20rpx 0;
  background-color: #ffffff;
  font-size: 26rpx;
  position: fixed;
  bottom: 0;
  left: 0;
}

.poiss-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48rpx);
  height: 100rpx;
  padding: 0 24rpx;
  border-bottom: 1px solid #f9f9f9;
}

.poiss-item-l {
  width: calc(100% - 184rpx);
}

.poiss-item-lhd {
  font-size: 32rpx;
  color: #333333;
  line-height: 48rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.poiss-item-lbd {
  font-size: 28rpx;
  color: #b6b6b6;
  line-height: 42rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.poiss-item-r {
  width: 36rpx;
  height: 36rpx;
  margin: 0 30rpx;
}

.primary-btn {
  width: 688rpx;
  height: 88rpx;
  margin: 0 auto;
  margin-top: 28rpx;
  background-color: #0b3f35;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
}

.page-con {
  width: 702rpx;
  height: 55vh;
  position: fixed;
  bottom: 0;
  left: 24rpx;
}

.con-hd {
  display: flex;
  align-items: center;
  width: 702rpx;
  height: 128rpx;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.2);
  border-radius: 24rpx;
}

.choose-address {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  height: 64rpx;
  margin: 0 auto;
  border-radius: 12rpx;
  border: 2rpx solid #0b3f35;
  font-size: 32rpx;
  color: #0b3f35;
}

.choose-address2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48rpx);
  padding: 0 24rpx;
}

.address2-l {
  width: calc(100% - 184rpx);
}

.address2-lhd {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 48rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.address2-lbd {
  font-size: 28rpx;
  color: #999999;
  line-height: 42rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.address2-r {
  width: 144rpx;
  height: 60rpx;
  background: #ffffff;
  border-radius: 12rpx;
  border: 2rpx solid #0b3f35;
  font-size: 28rpx;
  color: #0b3f35;
  line-height: 60rpx;
  text-align: center;
}

.con-bd {
  /* width: 654rpx; */
  height: calc(90vh - 160rpx);
  padding: 8rpx 24rpx 0;
  margin-top: 24rpx;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
}

.con-bd-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 110rpx;
}

.con-bd-item-name {
  width: 120rpx;
  height: 110rpx;
  text-align: left;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  line-height: 110rpx;
}

.con-bd-item-con {
  display: flex;
  align-items: center;
  width: calc(100% - 120rpx);
  height: 108rpx;
  border-bottom: 2rpx solid #f7f7f7;
}

.con-bd-item-con input {
  width: 100%;
  height: 60rpx;
}

.lable-item {
  width: 88rpx;
  height: 48rpx;
  margin-right: 18rpx;
  background: #ffffff;
  border-radius: 6rpx;
  border: 2rpx solid #e3e3e3;
  font-size: 24rpx;
  color: #333333;
  line-height: 48rpx;
  text-align: center;
}

.lable-item-on {
  background-color: #0b3f35;
  border: 2rpx solid #0b3f35;
  color: #ffffff !important;
}

.con-bd-item-con2 input {
  width: 50%;
  height: 60rpx;
}

.con-bd-sex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
  font-size: 28rpx;
}

.choose-sex-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}

.con-bd-agree {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40rpx;
  width: 100%;
}

.agreeicon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
  margin-top: 2rpx;
}

.agreetext {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 28rpx;
  color: #999999;
}

.con-ft-btn {
  width: 644rpx;
  height: 88rpx;
  margin-top: 50rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  line-height: 88rpx;
  text-align: center;
}

.con-ft-btn:last-child {
  margin-top: 32rpx;
}

.con-ft-btn1 {
  background-color: #0b3f35;
  color: #ffffff;
}

.con-ft-btn2 {
  background: #ffffff;
  border: 2rpx solid #dedede;
  color: #666666;
}

.con-ft-btn3 {
  background: #dedede;
  border: 2rpx solid #dedede;
  font-size: 32rpx;
  color: #ffffff;
}

.input-placeholder {
  font-size: 28rpx;
  color: #999999;
}
</style>
